<template>
  <!-- 全体成员 -->
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar class="van-hairline--surround"
                 title="全体成员"
                 left-text=""
                 right-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <!-- 群员 -->
    <!-- <div class="chatItem">
      <div style="margin-top:10px"
           v-for="(item,index) in chatList"
           :chatitem="item"
           :key="index"
           :style="imgStyle">
      <van-image fit="contain" width="70" height="70" :src="item.headerimg">
        <div style="text-align:center">
          <slot>
            {{item.user}}
          </slot>
        </div>
      </van-image>
      </div> -->
    <div class="container-fluid">
      <div class="firstline row">
        <div v-for="(item,index) in chatList"
             :chatitem="item"
             :key="index"
             :style="imgStyle"
             class="box theItem col-md-2 col-sm-2 col-2">
          <div class="element">
            <van-image fit="contain"
                       :src="item.headerimg">
              <slot>
                {{item.user}}
              </slot>
            </van-image>
          </div>
        </div>
      </div>
      <!-- 添加群员 -->
      <!-- <div style="margin-left:15px">
        <van-icon style="padding:20px" name="plus" size="60px"/>
      </div> -->
    </div>
    <!-- 底部功能栏沉底 -->
    <div ref="container"
         style="height: 150px;">
      <van-sticky>
        <!-- <div style="border: 1px solid #F5F5F5; bottom:0px;position: absolute;width: 100%;"> -->
        <!-- 群二维码 -->
        <!-- 弹出框解决数据传递 -->
        <!-- <van-popup v-model="show" position="top" :style="{ height: '100%' }" /> -->
        <van-cell title="群二维码"
                  title-style="font-size:16px"
                  @click="showPopup"
                  is-link>
          <template #right-icon>
            <van-icon name="qr"
                      size="24px" />
          </template>
        </van-cell>
        <van-popup v-model="showP">
          <van-image width="20rem"
                     height="20rem"
                     src="./images/二维码.jpg" />
        </van-popup>
        <!-- 群公告 -->
        <van-cell title="群公告"
                  size="large"
                  label="群公告......."
                  is-link />
        <!-- 备注 -->
        <van-cell title-style="font-size:16px"
                  title="备注"
                  size="large"
                  is-link>
        </van-cell>
        <!-- 查找聊天信息 -->
        <van-cell title-style="font-size:16px"
                  title="查找聊天信息"
                  size="large"
                  @click="showDate"
                  is-link>
        </van-cell>
        <van-calendar v-model="showD"
                      color="#72CACD"
                      :min-date="minDate"
                      :max-date="maxDate" />
        <!-- 消息免打扰 -->
        <van-cell title="消息免打扰"
                  title-style="font-size:16px"
                  size="large">
          <template #right-icon>
            <van-switch v-model="checked1"
                        active-color="#FFB6C1"
                        size="24px" />
          </template>
        </van-cell>
        <!-- 置顶聊天 -->
        <van-cell title="置顶聊天"
                  title-style="font-size:16px"
                  size="large">
          <template #right-icon>
            <van-switch v-model="checkedTop"
                        active-color="#FFB6C1"
                        size="24px" />
          </template>
        </van-cell>
        <!-- 保存到通讯录 -->
        <van-cell title="保存到通讯录"
                  title-style="font-size:16px"
                  size="large">
          <template #right-icon>
            <van-switch v-model="checked3"
                        active-color="#FFB6C1"
                        size="24px" />
          </template>
        </van-cell>
        <!-- 我在群里的昵称 -->
        <van-cell title-style="font-size:16px"
                  title="我在群里的昵称"
                  value="小黄"
                  size="large"
                  is-link>
        </van-cell>
        <!-- 显示群成员昵称 -->
        <van-cell title="显示群成员昵称"
                  title-style="font-size:16px"
                  size="large">
          <template #right-icon>
            <van-switch v-model="checked4"
                        active-color="#FFB6C1"
                        size="24px" />
          </template>
        </van-cell>
        <!-- 退群 -->
        <van-button type="primary"
                    size="large"
                    color="white"
                    block>
          <span style="color:red">删除并退出</span>
        </van-button>
      </van-sticky>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgStyle: {
        width: '80px',
        height: '80px',
        marginLeft: '30px'
      },
      show: true,
      showP: false,
      showD: false,
      checked1: true,
      checkedTop: false,
      checked3: false,
      checked4: true,
      minDate: new Date(2010, 1, 1),
      maxDate: new Date(2020, 12, 31),
      chatList: [
        {
          user: '单车少年',
          chatcontent: '嘻嘻嘻',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/单车少年.jpg')
        },
        {
          user: '蜡笔小新',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/蜡笔小新.jpg')
        },
        {
          user: '史珍香',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/史珍香.jpg')
        },
        {
          user: '维尼',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/维尼.jpg')
        },
        {
          user: 'Cc',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/Cc.jpg')
        },
        {
          user: '小黄',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/小黄.jpg')
        },
        {
          user: '五体投地',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/五体投地.jpg')
        },
        {
          user: '小熊猫',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/小熊猫.jpg')
        },
        {
          user: 'What',
          chatcontent: '哈哈哈',
          headerimg: require('../../assets/images/CommunityImages/ChatImages/What.jpg')
        }
      ]
    }
  },
  methods: {
    showPopup () {
      this.showP = true
    },
    showDate () {
      this.showD = true
    },
    onClickLeft: function () {
      this.$router.go(-1)
    },
    // 置顶
    setTop () {
      const newObject = {
        checkedTop: this.checkedTop,
        index: this.$route.query.index
      }
      this.$store.dispatch('_setTop', newObject)
    }
  }
}
</script>

<style scoped>
.container-fluid {
  margin-top: 4%;
}
.element {
  /* display: inline-block; */
  text-align: center;
  /* margin: 2%; */
}
.chatItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-grow: 4;
  padding: 10px;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-icon-arrow-left,
::v-deep .van-nav-bar__text,
::v-deep .van-ellipsis {
  color: #fff;
}
@media (min-width: 270px) and (max-width: 575.98px) {
  .box {
    margin-top: 10px;
  }
  .element {
    width: 50px;
    height: 50px;
    font-size: 12px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .box {
    margin-top: 20px;
  }
  .element {
    width: 65px;
    height: 65px;
    font-size: 16px;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  .box {
    margin-top: 50px;
  }
  .element {
    height: 90px;
    width: 90px;
    font-size: 24px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .box {
    margin-top: 55px;
  }
  .element {
    width: 100px;
    height: 100px;
    font-size: 24px !important;
  }
}
@media (min-width: 1200px) {
  .box {
    margin-top: 55px;
  }
  .element {
    width: 100px;
    height: 100px;
    font-size: 24px !important;
  }
}
/* #i_item{
} */
</style>
